<template>
  <!--菜单管理-->
  <div class="app-container">
    <el-form class="jc_search_wrap" v-model="searchList">
      <label>名称</label><el-input></el-input>
      <el-button @click="searchRows"><i class="el-icon-search"></i>查询</el-button>
    </el-form>
    <el-button-group class="jc_btn_wrap jc_btn_left">
      <el-button @click="createRow"><i class="jc_icon el-icon-plus"></i>新增菜单</el-button>
      <el-button @click="deleteRow"><i class=""></i>删除</el-button>
      <el-button @click="editRow"><i class=""></i>编辑</el-button>
    </el-button-group>
    <el-table @cell-click="rowsClick" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="80px">
      </el-table-column>
      <el-table-column label='名称'>
        <template scope="scope">
          <span v-if="scope.row.hasSpace===true" style="color:transparent;">111</span>
          <img src="../../assets/dw_icon/arrow_right.png" v-if="scope.row.status===true" class="jc_arrow">
          <img src="../../assets/dw_icon/arrow_down.png" v-else-if="scope.row.status === false" class="jc_arrow">
          <!--<img src="../../assets/icon/icon_cancel.png" v-else ="scope.row.status === 'noChildren'" class="jc_arrow">-->
          <span v-else ="scope.row.status === 'noChildren'" style="color:transparent;">11</span>
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label='创建时间'>
        <template scope="scope">
          {{scope.row.createTime}}
        </template>
      </el-table-column>
      <el-table-column label='自己加的状态码'>
        <template scope="scope">
          {{scope.row.status}}
        </template>
      </el-table-column>
      <el-table-column label='parentId'>
        <template scope="scope">
          {{scope.row.parentId}}
        </template>
      </el-table-column>
      <el-table-column label='编号'>
        <template scope="scope">
          {{scope.row.deptId}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="changePage" :page-size="15"/>
    <!--新建-->
    <el-dialog title="新建菜单按钮" :visible.sync="create_visible" class="jc_dialog_wrap">
      <el-form :model="form_create" label-width="120px">
        <el-form-item label="按钮名称">
          <el-input v-model="form_create.menuName"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="form_create.perms"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-tree style="width: 450px" :data="menuData" show-checkbox node-key="id" :props="defaultProps" ref="tree">
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCreateForm">确定</el-button>
        <el-button @click="create_visible=false">取消</el-button>
      </div>
    </el-dialog>
    <!--编辑-->
    <el-dialog title="编辑菜单" :visible.sync="edit_visible" class="jc_dialog_wrap">
      <el-form :model="form_edit" label-width="120px">
        <el-form-item label="按钮名称">
          <el-input v-model="form_edit.menuName"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="form_edit.perms"></el-input>
        </el-form-item>
        <el-tree style="width: 450px" :data="menuData" show-checkbox node-key="id" :props="defaultProps" ref="tree" :default-checked-keys="editMenuTree">
        </el-tree>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditForm">确定</el-button>
        <el-button @click="edit_visible=false">取消</el-button>
      </div>
    </el-dialog>
    <!--详情-->
    <el-dialog title="菜单详情" :visible.sync="detail_visible" class="jc_dialog_wrap">
      <el-form :model="form_detail" label-width="120px">
        <el-form-item label="角色名">
          <el-input v-model="form_detail.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form_detail.createTime" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detail_visible=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import * as Menu from "../../api/systemApi/menu";

  export default {
    components: {

    },
    data() {
      return {
        searchList: {},
        list: [],
        listAll : [{status: ''}],
        total: 0,
        create_visible: false,
        detail_visible: false,
        edit_visible: false,
        form_create: {},
        form_detail: {},
        form_edit: {},
        multipleSelection: [],
        tableClose: true,
        treeDeptData: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        menuData: [],
        editMenuTree: [],
      }

    },
    created() {
      this.fetchData();
      this.getMenuTree();
    },
    methods: {
      fetchData(p=1) {
        var params = this.searchList;
        params.pageNum = p;
        Menu.getMenuList(params).then(data => {
          console.log('菜单列表',data);
        })
        //this.$router.addRoutes([{"path" : "/a"}]);
        console.log("路由",this.$router.options.routes);
        console.log("路由",)

        ///////////////////////
        //console.log('this.routes',this.routes);

        this.listAll = this.routes;  //菜单信息保存在this.list中 listAll只是存储路由中的原始数据
        for(var j= 0;j<this.listAll.length;j++) { //总的数据listAll的状态status都为noChildren
          this.listAll[j].status = 'noChildren';
          if(this.listAll[j].parentId === 0) {
            this.list.push(this.listAll[j]);   //list 打开页面的数据
          }
        }
        for(var i in this.list) {
          if(this.list[i].children && this.list[i].children.length>0) { //如果有子集  图表为>
            this.list[i].status = true;  //true 点击有子集显示
          }
          /*for(var j in this.list[i].children) { //给自己添加 增删该查
            if(!this.list[i].children[j].hidden) {
            }
          }*/
        }

        console.log('this.list',this.list);
      },
      rowsClick(row) {
        if(row.status) { //当状态为true时  向里面加数据
          var addArr = []; //获得点击行的子集
          for(var i in row.children) {
            if(!row.children[i].hidden) {
              addArr.push(row.children[i]); //子集(不隱藏的)存在addArr中
            }
          }
          //判断addArr中 是否还有子集 加icon
          for(var i in addArr) {

            if(addArr[i].children && addArr[i].children.length > 0) {
              addArr[i].status = true;
              addArr[i].hasSpace = true;
            }else {
              addArr[i].hasSpace = true;
            }
          }
          //console.log('addArr',addArr);
          var add; //子集应该追加在list中的位置
          for(var j in this.list) {
            if(this.list[j].menuId ===row.menuId) {
              add = Number(j) + 1;
            }
          }
          //console.log('add',add);
          //正式追加
          for(var k in addArr) {
            this.list.splice(Number(k)+Number(add),0,addArr[k]);
            //把状态改成false
            for(var i in this.list) {
              if(this.list[i].menuId === row.menuId) {
                this.list[i].status = false;
              }
            }
          }
        }else {
          console.log('row',row);

          var addArr = []; //获得点击行的子集
          for(var i in row.children) {
            if(!row.children[i].hidden) {
              addArr.push(row.children[i]); //子集(不隱藏的)存在addArr中
            }
          }
          for(var i in addArr) {//获得子集的子集
            if(addArr[i].children && addArr[i].children.length > 0 ) {
              for(var j in addArr[i].children) {
                  //console.log('2',delArr[i].children[j])
                if(!addArr[i].children[j].hidden) {
                  addArr.push(addArr[i].children[j]);
                }
              }
            }
          }
          console.log('addArr',addArr);
          var delArr = [];//放删除的数组
          for(var i in this.list) {//虽然有这么多子集，但是不一定真的在list中全部显示，找出在list中已经显示的子集
            for(var j in addArr) {
              if(this.list[i].menuId === addArr[j].menuId) {
                delArr.push(addArr[j]);
              }
            }
          }
          console.log('delArr',delArr);
          var del; //子集应该删除在list中的位置
          for(var j in this.list) {
            if(this.list[j].menuId ===row.menuId) {
              del = Number(j) + 1;
            }
          }

          //正式删除
          for(var k in delArr) {
            this.list.splice(del,1);
            //把状态改成false
            for(var i in this.list) {
              if(this.list[i].menuId === row.menuId) {
                this.list[i].status = true;
              }
            }
          }

        }
      },
      searchRows() {
        this.fetchData()
      },
      emptyInputs() {
        this.searchList = {
          search_LIKE_name: ''
        };
        this.fetchData()
      },
      createRow() {
        this.create_visible = true;
        this.form_create = {}
      },
      submitCreateForm() {
        var keys = this.$refs.tree.getCheckedKeys().splice(-1,1);
        console.log('keys',keys);
        this.form_create.parentId =  keys.join(',') //只能选择一个部门，所以以最后一个勾选的为准
        this.form_create.type =  1; //写死的类型是提交按钮
        console.log('this.form_create',this.form_create);
        Menu.createMenu(this.form_create).then(data => {
          this.create_visible = false;
          this.fetchData();
        })
      },
      editRow() {
        if(this.multipleSelection.length === 0) {
          alert('请先勾选行');
        }else {
         /* Menu.detailRow(this.multipleSelection[0].id).then(data => {
            this.edit_visible = true;
            this.form_edit = data.data;
          })*/
        }
      },
      submitEditForm() {
        var keys = this.$refs.tree.getCheckedKeys().splice(-1,1);
        console.log('keys',keys);
        this.form_edit.parentId =  keys.join(',') //只能选择一个部门，所以以最后一个勾选的为准
        this.form_edit.type =  1; //写死的类型是提交按钮
        Menu.updateMenu(this.form_edit).then(data => {
          this.edit_visible = false;
          this.fetchData();
        })
      },
      detailRow(row) {
        User.searchRoleRow(row.id).then(data => {
          this.detail_visible = true;
          this.form_detail = data.data;
        })
      },
      deleteRow() {
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getMenuTree() {
        //数据状态menuData中
        for(var i=2;i<this.routes.length-1;i++) {
          var obj = {};
          obj.label=this.routes[i].name;
          obj.id=this.routes[i].menuId;
          this.menuData.push(obj);
          if(this.routes[i].children) {
            obj.children=[];
            for(var j = 0; j<this.routes[i].children.length;j++) {
              if(!this.routes[i].children[j].hidden) {
                var childrenObj = {};
                childrenObj.label = this.routes[i].children[j].name;
                childrenObj.id = this.routes[i].children[j].menuId;
                childrenObj.children = [];
                /*childrenObj.children[0] = {label: '增加',id: 1};
                 childrenObj.children[1] = {label: '删除',id: 2};
                 childrenObj.children[2] = {label: '编辑',id: 2};
                 childrenObj.children[3] = {label: '查看',id: 2};*/
                obj.children.push(childrenObj);
              }
            }
          }
        }
        console.log('menuData',this.menuData);
      },
      changePage(p) {
        this.fetchData(p)
      },
      rowsClick_yuanlaide(row) {
        Dept.getDepartmentList(params).then(data => {
          this.listLoading = false;
          this.listAll = data;
          for(var j= 0;j<this.listAll.length;j++) { //总的数据listAll的状态status都为noshow
            this.listAll[j].status = 'noshow';
          }
          for(var i = 0;i<this.listAll.length;i++){
            if(this.listAll[i].parentId === 0) {//一级菜单的状态是true
              this.listAll[i].status = true;
              this.list.push(this.listAll[i]);
            }
          }
          console.log('this.list',this.list);
          console.log('this.listAll',this.listAll);
        })
        if(row.status) { //当状态为true时  向里面加数据
          var addArr = []; //获得点击行的子集
          for(var i in this.listAll) {
            if(this.listAll[i].parentId === row.deptId) {
              addArr.push(this.listAll[i]); //子集存在addArr中
            }
            //判断是否有添加的子集 还有自己的子集
            for (var j in addArr) {
              if (this.listAll[i].parentId === addArr[j].deptId) {
                addArr[j].status = true;
              }
            }
          }
          //console.log('addArr',addArr);
          var add; //子集应该追加在list中的位置
          for(var j in this.list) {
            if(this.list[j].deptId ===row.deptId) {
              add = Number(j) + 1;
            }
          }
          //console.log('add',add);
          //正式追加
          for(var k in addArr) {
            this.list.splice(Number(k)+Number(add),0,addArr[k]);
            //把状态改成false
            for(var i in this.list) {
              if(this.list[i].deptId === row.deptId) {
                this.list[i].status = false;
              }
            }
          }
        }else {//当状态为true时  从里面取出去
          var addArr = []; //获得点击行的子集
          for(var i in this.listAll) {
            if(this.listAll[i].parentId === row.deptId) {
              addArr.push(this.listAll[i]);
            }
          }
          var add; //子集应该删除在list中的位置
          for(var j in this.list) {
            if(this.list[j].deptId ===row.deptId) {
              add = Number(j) + 1;
            }
          }
          //正式删除
          for(var k in addArr) {
            this.list.splice(add,1);
            //把状态改成false
            for(var i in this.list) {
              if(this.list[i].deptId === row.deptId) {
                this.list[i].status = true;
              }
            }
          }
        }


      },
    },
    computed: {
      tableHeight() {
        const filterHeight = 28
        var tableHeight = this.getTableHeight(filterHeight)
        return tableHeight;
      },
      routes() {
          return this.$router.options.routes
      },
    }
  }
</script>
